"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Send, Bot, User, Lightbulb, HelpCircle, BookOpen } from "lucide-react"

interface Message {
  id: string
  type: "user" | "ai"
  content: string
  timestamp: Date
}

export function AiChat() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      type: "ai",
      content:
        "您好！我是智慧农业AI助手，可以为您解答农业技术、作物管理、病虫害防治等相关问题。请问有什么可以帮助您的吗？",
      timestamp: new Date(),
    },
  ])
  const [inputValue, setInputValue] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const quickQuestions = [
    "如何防治水稻稻瘟病？",
    "玉米最佳播种时间是什么时候？",
    "土壤pH值对作物有什么影响？",
    "如何提高作物产量？",
    "有机肥和化肥的区别是什么？",
    "如何识别作物缺素症状？",
  ]

  const handleSendMessage = async (content: string) => {
    if (!content.trim()) return

    const userMessage: Message = {
      id: Date.now().toString(),
      type: "user",
      content: content.trim(),
      timestamp: new Date(),
    }

    setMessages((prev) => [...prev, userMessage])
    setInputValue("")
    setIsLoading(true)

    // 模拟AI回复
    setTimeout(() => {
      const aiResponse = generateAIResponse(content)
      const aiMessage: Message = {
        id: (Date.now() + 1).toString(),
        type: "ai",
        content: aiResponse,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, aiMessage])
      setIsLoading(false)
    }, 1500)
  }

  const generateAIResponse = (question: string): string => {
    const lowerQuestion = question.toLowerCase()

    if (lowerQuestion.includes("稻瘟病") || lowerQuestion.includes("病害")) {
      return `关于稻瘟病防治，我建议采取以下措施：

1. **预防措施**：
   - 选用抗病品种
   - 合理密植，保持田间通风
   - 科学施肥，避免偏施氮肥

2. **药剂防治**：
   - 发病初期可使用三环唑、稻瘟灵等药剂
   - 严重时可使用咪鲜胺、丙环唑等内吸性杀菌剂

3. **农业防治**：
   - 清除病残体，减少病源
   - 合理灌溉，避免长期深水

需要根据具体发病情况选择合适的防治方法。您的田块现在是什么情况呢？`
    }

    if (lowerQuestion.includes("玉米") && lowerQuestion.includes("播种")) {
      return `玉米播种时间需要根据地区和品种来确定：

**春玉米**：
- 东北地区：4月下旬-5月上旬
- 华北地区：4月中下旬
- 西北地区：4月下旬-5月中旬

**夏玉米**：
- 黄淮海地区：6月上中旬
- 长江流域：5月下旬-6月上旬

**播种条件**：
- 土壤温度稳定在10-12℃以上
- 土壤湿度适宜，不积水
- 天气预报无大的降温

建议您根据当地气候条件和品种特性来确定具体播种时间。您是在哪个地区种植呢？`
    }

    if (lowerQuestion.includes("ph") || lowerQuestion.includes("酸碱")) {
      return `土壤pH值对作物生长有重要影响：

**适宜pH范围**：
- 大多数作物：6.0-7.5
- 酸性土作物（如茶叶）：4.5-6.0
- 碱性土作物（如甜菜）：7.0-8.5

**pH值影响**：
1. **养分有效性**：pH过高或过低都会影响养分吸收
2. **微生物活性**：适宜的pH有利于有益微生物繁殖
3. **根系发育**：极端pH会损害根系

**调节方法**：
- 酸性土：施用石灰、草木灰
- 碱性土：施用硫磺、有机肥

建议定期检测土壤pH值，及时调节。您的土壤pH值是多少呢？`
    }

    return `感谢您的提问！这是一个很好的农业问题。基于我的知识库，我建议您：

1. 查阅相关的农业技术资料
2. 咨询当地农技专家
3. 结合实际情况制定方案

如果您能提供更多具体信息，我可以给出更精准的建议。您也可以在知识库中搜索相关资料，或者重新描述一下您遇到的具体问题。`
  }

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage(inputValue)
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">AI问答助手</h2>
        <p className="text-muted-foreground">智能农业技术咨询和问题解答</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <div className="lg:col-span-3">
          <Card className="h-[600px] flex flex-col">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Bot className="h-5 w-5" />
                智慧农业AI助手
              </CardTitle>
              <CardDescription>专业的农业技术问答，为您提供科学的种植指导</CardDescription>
            </CardHeader>

            <CardContent className="flex-1 flex flex-col">
              <ScrollArea className="flex-1 pr-4">
                <div className="space-y-4">
                  {messages.map((message) => (
                    <div
                      key={message.id}
                      className={`flex gap-3 ${message.type === "user" ? "justify-end" : "justify-start"}`}
                    >
                      {message.type === "ai" && (
                        <Avatar className="h-8 w-8">
                          <AvatarFallback>
                            <Bot className="h-4 w-4" />
                          </AvatarFallback>
                        </Avatar>
                      )}

                      <div
                        className={`max-w-[80%] rounded-lg p-3 ${
                          message.type === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
                        }`}
                      >
                        <div className="whitespace-pre-wrap text-sm">{message.content}</div>
                        <div className="text-xs opacity-70 mt-1">{message.timestamp.toLocaleTimeString()}</div>
                      </div>

                      {message.type === "user" && (
                        <Avatar className="h-8 w-8">
                          <AvatarFallback>
                            <User className="h-4 w-4" />
                          </AvatarFallback>
                        </Avatar>
                      )}
                    </div>
                  ))}

                  {isLoading && (
                    <div className="flex gap-3 justify-start">
                      <Avatar className="h-8 w-8">
                        <AvatarFallback>
                          <Bot className="h-4 w-4" />
                        </AvatarFallback>
                      </Avatar>
                      <div className="bg-muted rounded-lg p-3">
                        <div className="flex items-center gap-2">
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
                          <span className="text-sm">AI正在思考中...</span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </ScrollArea>

              <div className="flex gap-2 mt-4">
                <Input
                  placeholder="请输入您的农业问题..."
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  onKeyPress={handleKeyPress}
                  disabled={isLoading}
                />
                <Button onClick={() => handleSendMessage(inputValue)} disabled={isLoading || !inputValue.trim()}>
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <Lightbulb className="h-4 w-4" />
                快速提问
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              {quickQuestions.map((question, index) => (
                <Button
                  key={index}
                  variant="ghost"
                  className="w-full justify-start text-left h-auto p-2 text-sm"
                  onClick={() => handleSendMessage(question)}
                >
                  <HelpCircle className="h-3 w-3 mr-2 flex-shrink-0" />
                  <span className="truncate">{question}</span>
                </Button>
              ))}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-lg flex items-center gap-2">
                <BookOpen className="h-4 w-4" />
                功能介绍
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="space-y-2">
                <Badge variant="outline" className="w-full justify-start">
                  病虫害诊断
                </Badge>
                <Badge variant="outline" className="w-full justify-start">
                  栽培技术指导
                </Badge>
                <Badge variant="outline" className="w-full justify-start">
                  施肥方案建议
                </Badge>
                <Badge variant="outline" className="w-full justify-start">
                  环境监测分析
                </Badge>
                <Badge variant="outline" className="w-full justify-start">
                  产量优化建议
                </Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
